<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>simple</title>
    <style>
      .top {
        width: 60px;
        height: 60px;
        background-color: aquamarine;
      }
      .down {
        width: 60px;
        height: 60px;
        background-color: rgb(178, 40, 119);
      }
      .target {
        width: 100px;
        height: 100px;
        background-color: rgb(56, 75, 185);
        /* 不占位 */
        /* display: none; */
        /* 占位 */
        /* visibility: hidden; */
        opacity: 0;
      }
      .anyway {
        width: 60px;
        height: 60px;
        background-color: rebeccapurple;
      }
      .disable {
        width: 100px;
        height: 60px;
        background-color: blue;
        /* 鼠标css样式 pointer text not-allowed */

        
        /* 实质上的不生效 禁用 disable */
        pointer-events: none;
      }
      .fd{
        cursor: not-allowed;
      }
    </style>
  </head>
  <body>
    <div class="top"></div>
    <div class="target">
      <div class="anyway">xxxxx</div>
    </div>
    <div class="down"></div>
    <input type="text" />
    <input type="text" disabled />
    <input type="button" value="xxx" disabled />
    <button>x</button>
    <button disabled>y</button>
    <div class="fd">
        <div class="disable">xxxx</div>
    </div>
    <script>
    </script>
  </body>
</html>
